<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%String path = request.getContextPath(); %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>角色列表</title>
<base href="<%=path%>/">
<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link rel="stylesheet" href="layui/layui/css/layui.css" media="all" />
	<link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all" />
	<link rel="stylesheet" href="layui/css/news.css" media="all" />
</head>
<body class="childrenBody">
<form action="system/role/data" method="post">
<input type="hidden" name="pageNumber" value="${page.pageNum }" id="pageNumber"/>
	<blockquote class="layui-elem-quote news_search">
		<div class="layui-inline">
		    <div class="layui-input-inline">
		    	<input type="text" value="${role.roleName }" name="roleName" placeholder="请输入关键字" class="layui-input search_input">
		    </div>
		    <a class="layui-btn search_btn">查询</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-normal userAddBtn">添加用户</a>
		</div>
		<div class="layui-inline">
			<a class="layui-btn layui-btn-danger batchDel">批量删除</a>
		</div>
	</blockquote>
	</form>
	<div class="layui-form news_list">
	  	<table class="layui-table">
		    <colgroup>
				<col width="50">
				<col>
				<col width="11%">
			
				<col width="25%">
		    </colgroup>
		    <thead>
				<tr>
					<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose" id="allChoose"></th>
					<th>角色名称</th>
					<th>是否启用</th>
					<th>操作</th>
				</tr> 
		    </thead>
		    <tbody class="news_content">
		    <c:choose>
		    <c:when test="${fn:length(page.list)>0 }">
		   		<c:forEach items="${page.list }" var="user">
		   		<tr>
		   			<td>
		   			<input type="checkbox" name="checked" lay-skin="primary" lay-filter="choose" value="${user.id }">
		   			</td>
		   			<td>
		   			${user.roleName }
		   			</td>
		   			
		   			<td>
		   			<input type="checkbox" data-id="${user.id }" lay-filter="choose" name="switch" lay-skin="switch" lay-text="开启|停用" <c:if test="${user.flag==1 }">checked</c:if>>
		   			</td>
		   			
		   			<td>
		   			<a class="layui-btn layui-btn-mini user_edit" user-id="${user.id }"><i class="iconfont icon-edit"></i> 编辑</a>
		   			<a class="layui-btn layui-btn-danger layui-btn-mini user_del" data-id="${user.id }"><i class="layui-icon">&#xe640;</i> 删除</a>
		   			<a class="layui-btn layui-btn-danger layui-btn-mini user_permission" data-id="${user.id }"><i class="layui-icon">&#xe620;</i> 权限设置</a>
		   			</td>
		   		</tr>
		   		</c:forEach> 
		   		</c:when>
		   		<c:otherwise>
		   		<tr>
		   		<td colspan="4" style="text-align: center">暂无查询结果</td>
		   		</tr>
		   		</c:otherwise>
		   		</c:choose>
		    </tbody>
		</table>
	</div>
	<div id="page"></div>
	<script type="text/javascript" src="layui/layui/layui.js"></script>
</body>
<script type="text/javascript">
function a(){
	alert('a')
}
layui.config({
	base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
	var form = layui.form();
	var $ = layui.jquery;
	var layer = layui.layer;
	$(".search_btn").click(function(){
		$("form").submit();
		
	});
	$(".userAddBtn").click(function(){
		layer.open({
			title:'编辑用户信息',
			type:2,
			content:"system/user/toEdit",
			area: ['517px', '431px']
		});
		
	});
	$(".user_edit").click(function(){
		layer.open({
			title:'编辑用户信息',
			type:2,
			content:"system/user/toEdit?id="+$(this).attr("user-id"),
			area: ['517px', '431px']
		});
	})
	$(".user_permission").click(function(){
		var roleId = $(this).attr("data-id")
		layer.open({
			title:'编辑权限',
			type:2,
			content:"system/role/permission?roleId="+roleId,
			area: ['517px', '431px']
		});
	})
	$(".user_del").click(function(){
		var id = $(this).attr("data-id");
		layui.layer.confirm("确认删除吗?",function(){
			$.getJSON('system/user/delete?id='+id,function(ret){
				if(ret.status){
					layui.layer.alert('删除成功!',function(){
						$(".search_btn").click();
					})
				}else{
					layui.layer.msg('删除失败！');
				}
			})
		})
	})
	layui.laypage({
		cont:"page",
		pages:parseInt('${page.pages}'),
		curr:parseInt('${page.pageNum}'),
		jump:function(obj,first){
			if(!first){
				// 向system/user/data发请求，
				var pageNumber = obj.curr;
				$("#pageNumber").val(pageNumber);
				$("form").submit();
			}
		}
	});
	//全选
	form.on('checkbox(allChoose)', function(data){
		var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
		child.each(function(index, item){
			item.checked = data.elem.checked;
		});
		form.render('checkbox');
	});
	form.on("checkbox(choose)",function(data){
		var child = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"])');
		var childChecked = $(data.elem).parents('table').find('tbody input[type="checkbox"]:not([name="show"]):checked')
		if(childChecked.length == child.length){
			$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = true;
		}else{
			$(data.elem).parents('table').find('thead input#allChoose').get(0).checked = false;
		}
		form.render('checkbox');
	});
	$(".batchDel").click(function(){
		var idsArray = $("input[type='checkbox'][name='checked']:checked");
		if(idsArray.length==0){
			layui.layer.msg('请选中需要删除的数据');
		}else{
			var ids="";
			idsArray.each(function(){
				ids+=$(this).val()+"~";
			});
			$.getJSON('system/user/deletes?id='+ids,function(ret){
				if(ret.status){
					layui.layer.alert('删除成功!',function(){
						$(".search_btn").click();
					})
				}else{
					layui.layer.msg('删除失败！');
				}
			})
		}
		
	})
	form.on("switch(choose)",function(data){
		var flag =0;
		if(data.elem.checked){
			flag=1;
		}
		$.getJSON('system/user/save?id='+$(this).attr("data-id")+'&flag='+flag,function(ret){
			if(ret.status){
				layui.layer.msg('操作成功!');
			}else{
				layui.layer.msg('操作失败!');
			}
			
		})
	})
});
</script>
</html>